<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>信威云测试平台</title>
<link rel="stylesheet" href='css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">

<script src="js/lib/jquery.js"></script>
<script src="js/lib/jquery_cookie.js"></script>
<script src="js/lib/jquery_validate.js"></script>
<script src="js/lib/bootstrap.js"></script>
<script>

$(document).ready(function(){

  //Jquery Validation配置
  $("#IndexCarousel").carousel({
      interval: 8000,
      pause:false
  }).carousel('cycle');

  var validator = $("#form-login").validate({
    debug: true,
    rules: {
            username: {
                required: true,
                minlength: 2,
                maxlength: 10
            },
            password: {
                required: true,
                minlength: 2,
                maxlength: 16
            }
        },
        messages: {
            username: {
                required: '请输入用户名',
                minlength: '用户名不能小于2个字符',
                maxlength: '用户名不能超过10个字符',
                remote: '用户名不存在'
            },
            password: {
                required: '请输入密码',
                minlength: '密码不能小于2个字符',
                maxlength: '密码不能超过16个字符'
            }
        },
        //验证通过后，才允许提交
        submitHandler:function(form){
          var usrname = $('#username').val();
          var passwd = $('#password').val();

          var urlpara = '/front/user/login';
          var contentTypeStr = 'application/json;charset=UTF-8';
          var cookie_session = 'xwsessionid';
          var cookie_username = 'username';

          $.ajax({
            type:"POST",
            url:urlpara,
            cache:false,
            dataType:'json',
            contentType:contentTypeStr,
            data:JSON.stringify(
            {
              "name": usrname, "password":passwd
            }),

            success:function(data) {
              if(data.result === 0 && data.message === 'success'){
                $.cookie(cookie_session, data.xwsessionid ,{expires: 7});
                $.cookie(cookie_username, usrname,{expires: 7});
                window.open("homepage.html","_self");
              }
              else{
                alert("验证失败\n"+"result: "+data.result+"\nmessage: "+data.message);
              }

            },
            error: function() {
              alert("Ajax响应异常！");
            }
          });
        },
        //设置错误容器位置及CSS样式
        errorLabelContainer:"#error-container",
        errorElement:"li",
        wrapper:"ul",
        errorClass:"login-error"
    });
  
});

</script>
</head>

<body class="login-page">
    <div class="login-form">
    <form class="form-signin" id="form-login" role="form" method="post">
        <h2 class="form-signin-heading text-center">信威云测试平台</h2>
        <div class="input-group">
            <span class="input-group-addon">
	  		  <i class="glyphicon glyphicon-user"></i>
            </span>
            <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
        </div>
        <div class="input-group">
            <span class="input-group-addon">
       		  <span class="glyphicon glyphicon-qrcode"></span>
            </span>
            <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码" >
        </div>
        <p id="error-container" style="margin-bottom: 0"></p>
        <input class="btn btn-primary btn-block btn-login" type = "submit" id="login_btn" value="登陆"/>
    </form>
</div>
    <div id="IndexCarousel" class="carousel slide">
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/image1.jpg" alt="First slide">
            </div>
            <div class="item">
                <img src="img/image2.jpg" alt="Second slide">
            </div>
            <div class="item">
                <img src="img/image3.jpg" alt="Third slide">
            </div>
        </div>
</div>

       
</body>
</html>
